<script setup>
import { ref } from 'vue'

// 战术分类
const categories = ref([
  { id: 'early', name: '初期战术' },
  { id: 'mid', name: '中期战术' },
  { id: 'late', name: '后期战术' },
  { id: 'team', name: '团队配合' },
  { id: 'position', name: '位置选择' },
  { id: 'combat', name: '战斗技巧' }
])

// 战术技巧数据
const tactics = ref([
  {
    id: 1,
    category: 'early',
    title: '落点选择策略',
    description: '选择合适的落点是游戏胜利的第一步，根据自身实力和团队风格选择不同的落点区域。',
    content: [
      '新手玩家建议选择地图边缘的小型城镇或渔村，资源相对较少但竞争压力小',
      '刚枪玩家可以选择热门区域如P城、军事基地等，快速获取高级资源',
      '职业玩家可根据航线方向和飞机上的人数分布，选择人少但资源丰富的区域',
      '注意观察其他玩家的跳伞方向，避免不必要的早期冲突'
    ],
    imageUrl: '/src/assets/pubg-images/pubg-tactics.svg'
  },
  {
    id: 2,
    category: 'mid',
    title: '中期转移技巧',
    description: '中期是从发育阶段向决赛圈过渡的关键时期，掌握转移技巧能大幅提高存活率。',
    content: [
      '提前观察毒圈收缩方向，规划最佳转移路线',
      '优先选择载具转移，但注意载具产生的噪音可能暴露位置',
      '在安全区内选择靠近下一个缩圈中心的位置，避免多次转移',
      '转移过程中注意观察周围环境，警惕伏击'
    ],
    imageUrl: 'https://picsum.photos/id/248/800/400'
  },
  {
    id: 3,
    category: 'late',
    title: '决赛圈策略',
    description: '决赛圈是决定胜负的关键阶段，需要更加谨慎的战术和精准的操作。',
    content: [
      '占据高地或有良好视野的位置，掌握战场主动权',
      '合理利用烟雾弹和闪光弹，创造有利的战斗条件',
      '注意听声辨位，判断敌人的位置和移动方向',
      '保持耐心，避免盲目冲锋，等待最佳攻击时机'
    ],
    imageUrl: 'https://picsum.photos/id/249/800/400'
  },
  {
    id: 4,
    category: 'team',
    title: '四人团队配合',
    description: '团队配合是多人模式中的核心要素，良好的沟通和分工能显著提高战斗力。',
    content: [
      '明确团队分工，如狙击手、突击手、支援和指挥',
      '保持合理的阵型，避免扎堆或分散过远',
      '及时分享敌人位置和资源信息，保持沟通顺畅',
      '互相掩护，交替推进，形成交叉火力'
    ],
    imageUrl: 'https://picsum.photos/id/250/800/400'
  },
  {
    id: 5,
    category: 'position',
    title: '掩体利用技巧',
    description: '合理利用掩体是提高存活率和战斗力的关键，不同类型的掩体有不同的使用方法。',
    content: [
      '了解各种掩体的防护效果，优先选择砖墙、岩石等坚固掩体',
      '掌握闪身射击技巧，减少暴露时间',
      '注意利用反斜面和高低差，获得视野优势',
      '在移动时保持与掩体的距离，避免被敌人预判位置'
    ],
    imageUrl: 'https://picsum.photos/id/251/800/400'
  },
  {
    id: 6,
    category: 'combat',
    title: '枪法提升技巧',
    description: '精准的枪法是击败敌人的基础，通过科学的训练方法可以有效提高射击精度。',
    content: [
      '进行靶场练习，熟悉不同武器的后坐力和弹道特性',
      '掌握压枪技巧，通过向下拖动准星抵消后坐力',
      '根据距离选择合适的开火模式，远距离点射，近距离扫射',
      '练习预瞄和快速瞄准，提高反应速度'
    ],
    imageUrl: 'https://picsum.photos/id/252/800/400'
  }
])

// 当前选择的分类
const selectedCategory = ref('all')

// 获取筛选后的战术
const getFilteredTactics = () => {
  if (selectedCategory.value === 'all') {
    return tactics.value
  }
  return tactics.value.filter(tactic => tactic.category === selectedCategory.value)
}

// 热门战术建议
const popularStrategies = ref([
  {
    title: '"钓鱼执法"战术',
    description: '在房间内放置诱饵武器，躲在角落伏击前来捡取的敌人',
    difficulty: '中等',
    effectiveness: '高'
  },
  {
    title: '"闪电战"突击',
    description: '快速接近敌人，利用投掷物和近距离武器快速消灭对手',
    difficulty: '高',
    effectiveness: '极高'
  },
  {
    title: '"LYB"伏地魔',
    description: '选择合适的地形隐蔽，等待敌人接近后发动突然袭击',
    difficulty: '低',
    effectiveness: '中等'
  }
])
</script>

<template>
  <div class="tactics-view">
    <div class="container">
      <h1 class="page-title">战术技巧</h1>
      
      <!-- 战术分类 -->
      <div class="categories">
        <button 
          class="category-btn"
          :class="{ active: selectedCategory === 'all' }"
          @click="selectedCategory = 'all'"
        >
          全部战术
        </button>
        <button 
          v-for="category in categories"
          :key="category.id"
          class="category-btn"
          :class="{ active: selectedCategory === category.id }"
          @click="selectedCategory = category.id"
        >
          {{ category.name }}
        </button>
      </div>
      
      <!-- 战术卡片 -->
      <div class="tactics-cards">
        <div 
          v-for="tactic in getFilteredTactics()"
          :key="tactic.id"
          class="tactic-card"
        >
          <div class="tactic-image" :style="{ backgroundImage: `url(${tactic.imageUrl})` }"></div>
          <div class="tactic-content">
            <div class="tactic-category">{{ getCategoryName(tactic.category) }}</div>
            <h2 class="tactic-title">{{ tactic.title }}</h2>
            <p class="tactic-description">{{ tactic.description }}</p>
            <ul class="tactic-details">
              <li v-for="(item, index) in tactic.content" :key="index">
                <span class="detail-icon">•</span>
                {{ item }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      
      <!-- 热门战术推荐 -->
      <section class="popular-section">
        <h2 class="section-title">热门战术推荐</h2>
        <div class="popular-strategies">
          <div 
            v-for="(strategy, index) in popularStrategies"
            :key="index"
            class="strategy-card"
          >
            <div class="strategy-header">
              <h3 class="strategy-title">{{ strategy.title }}</h3>
              <div class="strategy-meta">
                <span class="difficulty">难度: {{ strategy.difficulty }}</span>
                <span class="effectiveness">效果: {{ strategy.effectiveness }}</span>
              </div>
            </div>
            <p class="strategy-description">{{ strategy.description }}</p>
          </div>
        </div>
      </section>
      
      <!-- 进阶技巧 -->
      <section class="advanced-section">
        <h2 class="section-title">进阶技巧</h2>
        <div class="advanced-tips">
          <div class="tip-column">
            <h3>移动技巧</h3>
            <ul>
              <li>学会"之"字形移动，增加敌人瞄准难度</li>
              <li>利用跳跃和下蹲组合，做出不规则运动轨迹</li>
              <li>在建筑物间移动时，使用冲刺+跳跃的方式快速转移</li>
              <li>涉水移动可以减少脚步声，适合隐蔽接近</li>
            </ul>
          </div>
          <div class="tip-column">
            <h3>投掷物技巧</h3>
            <ul>
              <li>烟雾弹不仅可以掩护自己，还可以干扰敌人视线</li>
              <li>手榴弹可以通过反弹扔进房间，攻击掩体后的敌人</li>
              <li>燃烧瓶适合封锁敌人的移动路线</li>
              <li>闪光弹在开阔地形效果有限，更适合室内战斗</li>
            </ul>
          </div>
          <div class="tip-column">
            <h3>声音技巧</h3>
            <ul>
              <li>使用耳机可以更清晰地听到敌人的脚步声和枪声</li>
              <li>学会根据枪声判断敌人的距离和方向</li>
              <li>可以通过脚步声识别敌人的装备类型和移动状态</li>
              <li>适当制造噪音引开敌人注意力</li>
            </ul>
          </div>
        </div>
      </section>
      
      <!-- 战术训练计划 -->
      <section class="training-section">
        <h2 class="section-title">战术训练计划</h2>
        <div class="training-plan">
          <div class="plan-item">
            <div class="plan-week">第1周</div>
            <div class="plan-content">
              <h4>基础训练</h4>
              <p>每天进行30分钟的靶场练习，重点提升压枪和瞄准精度</p>
            </div>
          </div>
          <div class="plan-item">
            <div class="plan-week">第2周</div>
            <div class="plan-content">
              <h4>战术意识</h4>
              <p>专注于地图熟悉度和位置选择，学习分析毒圈走势</p>
            </div>
          </div>
          <div class="plan-item">
            <div class="plan-week">第3周</div>
            <div class="plan-content">
              <h4>团队配合</h4>
              <p>寻找固定队友，练习沟通和协同作战能力</p>
            </div>
          </div>
          <div class="plan-item">
            <div class="plan-week">第4周</div>
            <div class="plan-content">
              <h4>综合提升</h4>
              <p>结合前几周的训练成果，进行实战演练和复盘分析</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    getCategoryName(categoryId) {
      const categoryMap = {
        early: '初期战术',
        mid: '中期战术',
        late: '后期战术',
        team: '团队配合',
        position: '位置选择',
        combat: '战斗技巧'
      }
      return categoryMap[categoryId] || categoryId
    }
  }
}
</script>

<style scoped>
.tactics-view {
  padding: 2rem 0;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.page-title {
  font-size: 2.5rem;
  color: var(--color-pubg-primary);
  text-align: center;
  margin-bottom: 2rem;
}

.categories {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.category-btn {
  padding: 0.8rem 1.5rem;
  border: 2px solid var(--color-pubg-primary);
  background-color: transparent;
  color: var(--color-pubg-primary);
  border-radius: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  font-weight: 500;
}

.category-btn:hover {
  background-color: var(--color-pubg-primary);
  color: white;
}

.category-btn.active {
  background-color: var(--color-pubg-primary);
  color: white;
}

.tactics-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.tactic-card {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tactic-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.tactic-image {
  height: 200px;
  background-size: cover;
  background-position: center;
}

.tactic-content {
  padding: 1.5rem;
}

.tactic-category {
  display: inline-block;
  background-color: var(--color-pubg-primary-light);
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 1rem;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

.tactic-title {
  font-size: 1.5rem;
  color: var(--color-heading);
  margin-bottom: 0.8rem;
}

.tactic-description {
  color: var(--color-text);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.tactic-details {
  list-style: none;
  padding: 0;
}

.tactic-details li {
  margin-bottom: 0.8rem;
  line-height: 1.5;
  color: var(--color-text);
  position: relative;
  padding-left: 1.5rem;
}

.detail-icon {
  position: absolute;
  left: 0;
  color: var(--color-pubg-primary);
  font-weight: bold;
}

.section-title {
  font-size: 1.8rem;
  color: var(--color-heading);
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 3px;
  background-color: var(--color-pubg-primary);
}

.popular-section {
  margin-bottom: 3rem;
}

.popular-strategies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.strategy-card {
  background-color: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-left: 4px solid var(--color-pubg-primary);
}

.strategy-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.8rem;
}

.strategy-title {
  font-size: 1.2rem;
  color: var(--color-heading);
  margin: 0;
}

.strategy-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
}

.difficulty {
  color: #f39c12;
}

.effectiveness {
  color: #27ae60;
}

.strategy-description {
  color: var(--color-text);
  line-height: 1.5;
}

.advanced-section {
  margin-bottom: 3rem;
}

.advanced-tips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.tip-column {
  background-color: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tip-column h3 {
  color: var(--color-pubg-primary);
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.tip-column ul {
  list-style: none;
  padding: 0;
}

.tip-column li {
  margin-bottom: 0.8rem;
  line-height: 1.5;
  color: var(--color-text);
  position: relative;
  padding-left: 1.5rem;
}

.tip-column li::before {
  content: '▶';
  position: absolute;
  left: 0;
  color: var(--color-pubg-primary);
  font-size: 0.8rem;
}

.training-section {
  margin-bottom: 2rem;
}

.training-plan {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.plan-item {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
}

.plan-week {
  background-color: var(--color-pubg-primary);
  color: white;
  padding: 1.5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
}

.plan-content {
  padding: 1.5rem;
}

.plan-content h4 {
  color: var(--color-heading);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.plan-content p {
  color: var(--color-text);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .tactics-cards,
  .popular-strategies,
  .advanced-tips,
  .training-plan {
    grid-template-columns: 1fr;
  }
  
  .categories {
    flex-direction: column;
    align-items: center;
  }
  
  .category-btn {
    width: 100%;
    max-width: 300px;
  }
  
  .plan-item {
    flex-direction: column;
  }
  
  .plan-week {
    min-width: auto;
    padding: 1rem;
  }
}
</style>